前端程式設計筆記 (2026.4)

第十二章：JS應用

1.訂單統計與送出準備

本章節重點在於如何透過 jQuery 監聽多個輸入來源（如數量、單價、配料勾選），即時計算總金額，並在最後生成一份美觀的訂單摘要，最後封裝成 JSON 格式準備傳送給後端 API。

1-1. 訂單統計運算邏輯 (Real-time Calculation)

當使用者調整數量或價格時，我們需要即時更新畫面上的數值。這裡使用了 input 事件，它比 change 更靈敏，能隨時捕捉輸入框或滑桿的變動。

// 宣告全域變數
let chk_content = []; // 儲存單點的配料內容
let unitPrice = 0;    // 每一杯的單價
let totalPrice = 0;   // 訂單總價格

// 監聽單價輸入框的變動
$("#p_price").on("input", function(){
    // 1. 計算配料 (每樣 10 元)
    chk_content = []; // 每次運算前先清空陣列
    $("input[name='chk01']:checked").each(function(){
        chk_content.push($(this).val()); // 將勾選的配料存入陣列
    });

    // 2. 計算單價 = 基礎價格 + (配料數量 * 10)
    // 注意：使用 Number() 確保是數字相加，避免字串串接 (如 "50"+"10" 變成 "5010")
    unitPrice = Number($(this).val()) + Number(chk_content.length * 10);

    // 3. 計算總價 = 數量 * 單價
    totalPrice = $("#p_num").val() * unitPrice;

    // 4. 更新畫面顯示
    $("#totalPrice").text(totalPrice);
});

1-2. 產出訂單摘要 (Template Literals)

在使用者點擊「確認」按鈕時，會先檢查所有驗證旗標（Flags）。若通過驗證，則利用 ES6 的 樣板字面值（反引號 ` ） 動態生成 HTML 內容。

$("#ok_btn").click(function(){
    // 檢查表單是否都填寫正確
    if(flag_username && flag_p_name && flag_p_ice){
        // 陣列轉字串技巧：使用 .join(", ") 將 ["珍珠", "椰果"] 轉成 "珍珠, 椰果"
        let strHTML = `
            <h1>訂購者: ${$("#username").val()}</h1>
            <h1>產品名稱: ${$("#p_name").val()}</h1>
            <h1>單點配料: ${chk_content.join(", ")}</h1>
            <h1>總價: ${totalPrice} 元</h1>
        `;
        $("#showList").html(strHTML); // 將生成的 HTML 注入顯示區塊
    } else {
        alert("表單欄位有錯!");
    }
});

1-3. 資料封裝與 JSON 準備

確認訂單的最後一步，是將散落在各個 Input 的資料彙整成一個 JavaScript 物件（Object）。這是為了後續使用 AJAX 傳送給後端伺服器（如 Python Flask）做準備。

$("#order_btn").click(function(){
    // 收集傳遞至後端的訂單資料
    let orderData = {
        username : $("#username").val(),
        productName: $("#p_name").val(),
        ice: $("#p_ice").val(),
        toppings: chk_content,         // 直接傳入陣列
        quantity: $("#p_num").val(),
        unitPrice: $("#p_price").val(),
        toppingPrice: Number(chk_content.length * 10),
        totalPrice: totalPrice,        // 計算後的總數值
        createdAt: new Date().toLocaleString() // 產生當前時間字串
    };

    console.log(orderData); // 在主控台檢視完整的 JSON 結構
});

2.POST至後端 (AJAX 新增資料)

在前一個步驟中，我們已經將使用者的訂單彙整成 JavaScript 物件 (orderData)。接下來，我們要透過 AJAX 的 POST 方法，將這筆資料傳送給後端伺服器（例如本機開發用的 json-server 或是您專案的 Python Flask API）寫入資料庫。

2-1. 資料格式轉換 (JSON.stringify)

網頁與伺服器之間的通訊協定只能傳遞「純文字」，無法直接看懂 JavaScript 的「物件 (Object)」。因此，在傳送前必須將其轉換為 JSON 格式的字串。

// 自動將 JS 物件轉換成 JSON 格式的字串
console.log(JSON.stringify(orderData));

2-2. jQuery AJAX POST 核心設定

發送 POST 請求時，與讀取資料的 GET 請求不同，必須精準設定檔頭 (Header) 與資料本體 (Data)：

// 傳遞至後端 json-server 或 Flask API
$.ajax({
    type: "POST", // HTTP 請求方法：POST 用於「新增」資料
    url: "http://localhost:3000/orders", // 後端 API 的接收端點 (Endpoint)
    contentType: "application/json", // 關鍵！告訴後端我們傳遞的格式是 JSON
    data: JSON.stringify(orderData), // 實際傳送的資料內容 (必須轉為字串)
    success: function(data){
        // 請求成功時觸發 (HTTP 狀態碼 200~299)
        console.log("後端回傳的確認資料：", data);
        alert("新增成功!");
        
        // 實務上這裡通常會加上後續動作：
        // 例如：關閉結帳彈出視窗、清空購物車、重新導向到感謝頁面等
    },
    error: function(){
        // 請求失敗時觸發 (例如伺服器未開機、網址錯誤、網路斷線)
        alert("新增失敗，請檢查網路連線或稍後再試!");
    }
});